<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .s1 {
        background: rgb(248, 215, 215);
      }
      .s2 {
        background: rgb(246, 248, 215);
      }
      .s3 {
        background: rgb(215, 221, 248);
      }

      .active {
        border: rgb(17, 0, 255) 5px solid;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <template id="t1">
      <div>
        <h1>todolist</h1>
        <button :class="{active:cstatus===''}" @click="changeStatus('')">
          全部
        </button>
        <button
          class="s1"
          :class="{active:cstatus===1}"
          @click="changeStatus(1)"
        >
          未完成
        </button>
        <button
          class="s2"
          :class="{active:cstatus===2}"
          @click="changeStatus(2)"
        >
          进行中
        </button>
        <button
          class="s3"
          :class="{active:cstatus===3}"
          @click="changeStatus(3)"
        >
          已完成
        </button>

        <table border="1px">
          <thead>
            <tr>
              <th>标题</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr :class="status[li.status].cls" v-for="li in lists" :key="li.id">
              <td>{{li.title}}</td>
              <td>{{status[li.status].text}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
    <script>
      const request = axios.create({
        baseURL: "http://127.0.0.1:3009",
      });
      // 数据驱动视图
      const vm = new Vue({
        el: "#app",
        template: "#t1",
        data: {
          cstatus: "",
          status: {
            1: {
              text: "未完成",
              cls: "s1",
            },
            2: {
              text: "进行中",
              cls: "s2",
            },
            3: {
              text: "已完成",
              cls: "s3",
            },
          },
          lists: [],
        },
        created() {
          // ① 获取数据
          this.getLists();
        },
        methods: {
          changeStatus(status) {
            this.cstatus = status;
            this.getLists();
          },
          async getLists() {
            const where = {
              params: {},
            };
            if (this.cstatus !== "") {
              where.params.status = this.cstatus;
            }
            const res = await request.get("/lists", where);
            // ② 将数据放到响应式变量中
            this.lists = res.data;
          },
        },
      });
    </script>
  </body>
</html>
